<template>
  <div class="message">
    <div class="banner">消息</div>
    <div class="real_time_message">
      <ul>
        <li>
          <img src="../../static/images/like_logo.png" alt="" />
          <van-cell title="" to="index" />
          <!-- <span>{{noread_like_message[0].username}}等{{noread_like_message.length}}人喜欢你的作品</span> -->
        </li>
        <li>
          <img src="../../static/images/focus_logo.png" alt="" />
          <van-cell title="" to="index" />
          <!-- <span>{{noread_like_message[0].username}}等{{noread_like_message.length}}人关注了你</span> -->
        </li>
        <li>
          <img src="../../static/images/comment_logo.png" alt="" />
          <van-cell title="" to="index" />
          <!-- <span>{{noread_like_message[0].username}}等{{noread_like_message.length}}人评论了你的作品</span> -->
        </li>
      </ul>
    </div>
    <span class="system_message_title">系统消息</span>
    <div class="message_container">
      <ul>
        <li v-for="(item, index) in system_messages" :key="index">
          <img
            v-if="index % 2 == 1"
            src="../../static/images/portrait01.png"
            alt=""
          />
          <img v-else src="../../static/images/portrait02.png" alt="" />
          <span class="message_title">系统</span>
          <span class="message_time">{{ item.time }}</span>
          <van-cell :title="item.content" to="index" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      system_messages: [
        { time: "2021.12.26 15:00", content: "管理员通过了你发布的作品" },
        { time: "2021.12.26 15:00", content: "管理员通过了你发布的作品" },
        { time: "2021.12.26 15:00", content: "管理员通过了你发布的作品" },
        { time: "2021.12.26 15:00", content: "管理员通过了你发布的作品" },
      ],
      noread_like_message: [

      ]
    };
  },
};
</script>

<style lang="less">
.message {
  width: 750rpx;
  height: 100%;
  margin: 0 auto;

  // 顶部
  .banner {
    width: 100%;
    margin: 5.7% 0 9.8% 0;
    text-align: center;
  }
  .real_time_message {
    padding: 0 3.1%;
    margin-bottom: 5.8%;

    li {
      margin-bottom: 2.5%;
    }

    img {
      width: 14.2%;
      margin-right: 1.4%;
    }

    .van-cell {
      display: inline-block;
      width: 84.4%;
      height: 31.5%;
      border-radius: 2.9%;
      background-color: rgb(245, 245, 245);
    }
  }
  .system_message_title {
    margin-left: 4.3%;
  }

  .message_container {
    width: 100%;
    padding: 0 3.1%;
    box-sizing: border-box;

    li {
      margin-top: 5.4%;
      position: relative;

      img {
        width: 15.8%;
        margin-right: 15px;
      }

      .van-cell {
        width: 78.9%;
        display: inline-block;
        height: 15.8%;
        padding: 0;
      }

      .message_title {
        display: block;
        position: absolute;
        left: 20.4%;
        top: 0;
      }

      .message_time {
        display: block;
        position: absolute;
        right: 6.5%;
        top: 0;
        color: rgb(148, 148, 148);
      }
    }
  }
}
</style>